<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Popup Example 2</title>
    <script src="source/moo.js"></script>
    <script src="source/switchable.js"></script>
	<link rel="stylesheet" href="reset.css" type="text/css" /> 
</head>
<body>
<style>
.category {width:190px}
.category h4{background:url(assets/bg_hd.gif) no-repeat 0 -56px; height:28px;line-height:28px;}
.category h4 b{background:url(assets/bg_hd.gif) no-repeat right -84px; display:block; text-indent:12px;}
.category ul{border:1px solid #cccccc;border-top:none;}
.category li{height:25px;width:188px;float:left;}
.category li a{height:23px;line-height:22px;margin:1px;padding-left:15px;color:#505050;display:block;cursor:pointer;}
.category li a:hover{background:#ffb33b;font-weight:bolder;color:#ffffff;text-decoration:none;}
.category .cat ul{border:2px solid #ffb33b;width:220px;}
</style>
    <div>
        <p>
            <h1>Popup Example 2:</h1>
        </p>
    </div>



<div class="category">
      <h4><b>商品分类</b></h4>
      <ul class="clearfix">
	       <li class="cat1 cat" >
					<div  class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat1',
							triggerType:'mouse',
							align:{
								node:'.cat1',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">精品鞋帽</a>
		   </li>
		   <li class="cat2 cat">
					<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat2',
							triggerType:'mouse',
							align:{
								node:'.cat2',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">服饰家居</a>
		   </li>
		   <li class="cat3 cat">
					<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat3',
							triggerType:'mouse',
							align:{
								node:'.cat3',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">名品箱包</a>
		   </li>
		   <li class="cat4 cat">
					<div  class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat4',
							triggerType:'mouse',
							align:{
								node:'.cat4',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">玩乐数码</a>
		   </li>
		   <li class="cat5 cat">
					<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat5',
							triggerType:'mouse',
							align:{
								node:'.cat5',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">电脑设备</a>
		   </li>
		   <li class="cat6 cat">
					<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
							trigger:'.cat6',
							triggerType:'mouse',
							align:{
								node:'.cat6',
								points:['tr','tl'],
								offset:[0,0]
							}}">
							<ul class="clearfix">
									<li><a href="#">001</a></li>
									<li><a href="#">002</a></li>
									<li><a href="#">003</a></li>
									<li><a href="#">004</a></li>
									<li><a href="#">005</a></li>
									<li><a href="#">006</a></li>
							</ul>
					</div>
					<a href="#">移动设备</a>
		   </li> 
	  </ul>

</div>




    
<div class="code" style="margin-top:20px;">
    <h2>Dom Code:</h2>
    <pre>
&lt;div class="aaa"&gt;
		&lt;div id="demo" class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
				trigger:'.aaa',
				triggerType:'mouse',
				align:{
					node:'.aaa',
					points:['cr','cc'],
					offset:[0,0]
				}}"&gt;
				弹出层
		&lt;/div&gt;
		触点层      &lt;!-- Dom结构中，弹出层务必放进触点层里，防止冒泡 --&gt;
&lt;/div&gt;
    </pre>
</div>



<div class="code" style="margin-top:20px;">
    <h2>Css code:</h2>
<pre>
#demo{
            height:80px; 
            width:110px; 
            background:#ffeec4;
			text-align:center;
			line-height:50px;
        }
#trigger{
            height:220px; 
            width:158px; 
            background:#fbb4b4;
			text-align:center;
			line-height:220px;
        }
.bbb{width:200px;height:200px;background:#ccc;}
</pre>
</div>


</body>
</html>
